<template>
<div>
  <el-container class="homepage">
    <el-header height='80px' class="el-header">
      <div>
        <img src='../../assets/logo.png' width="100px" height="70px" alt="">
        <router-link to="/" class="sy">首页</router-link>
      </div>
      <div class="header-right">
        <span v-if="zhi !== null">欢迎您，{{isLoginData.rname}} ヾ(≧▽≦*)</span>
        <router-link :to="{ path: '/my', query: { id: id } }"><el-avatar v-if="zhi !== null" :src='isLoginData.logo'></el-avatar></router-link>
        <el-button v-if="zhi !== null" @click="logout">退出</el-button>
        <router-link v-if="zhi === null" to="/clogin" class="rl">登录</router-link>
      </div>

    </el-header>
      <el-main class="el-main">
        <router-view></router-view>
      </el-main>
  </el-container>
</div>
</template>

<script>
export default {
  data() {
    return {
      zhi: null,
      ranme:'',
      isLoginData:{},
      id:0,
    }
  },
  created() {
    this.isLogin();
  },
  methods: {
    isLogin(){
      let crea = localStorage.getItem('crea');
      this.zhi = crea;
      this.isLoginData=crea = JSON.parse(crea);
      this.id=this.isLoginData.id;
    },
    logout() {
      localStorage.clear('crea'); // 清除登录信息
      this.zhi = null; // 更新zhi的值以立即隐藏元素
      this.$router.push('/index');
      this.$message({
          message: '退出登录成功',
          type: 'success'
        });
    }
  }
}
</script>

<style lang="less" scoped>
.homepage {
  height: 100%;
}
.el-header {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100px; /* 设置高度为100px */
  background: #7cc1f0;
  display: flex;
  justify-content: space-between;
  color: #fff;
  align-items: center;
  .header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    span, .rl, .el-button {
      margin-left: 20px; /* 设置间隔 */
    }
  }
}
.el-main{
  margin-top: 80px;
}
.sy{
 margin-left: 20px;
 font-size: 20px;
}
</style>
